import React from "react";
import { Switch,NavLink } from "react-router-dom"
import PrivateRoute from "../../utils/PrivateRoute"


//引入样式
import "./index.css"

// 引入组件懒加载
let Home = React.lazy(() => import("../Home/Home.jsx"))
let Cate = React.lazy(() => import("../Cate/Cate.jsx"))
let Shop = React.lazy(() => import("../Shop/Shop.jsx"))
let Me = React.lazy(() => import("../Me/Me.jsx"))

export default function Index() {
    return (
        <>
            <React.Suspense fallback={<div>正在加载...</div>}>
                <Switch>
                    <PrivateRoute path="/index/home" component={Home}></PrivateRoute>
                    <PrivateRoute path="/index/cate" component={Cate}></PrivateRoute>
                    <PrivateRoute path="/index/shop" component={Shop}></PrivateRoute>
                    <PrivateRoute path="/index/me" component={Me}></PrivateRoute>
                </Switch>
            </React.Suspense>
            <footer>
                <NavLink to="/index/home" activeClassName="select">主页</NavLink>
                <NavLink to="/index/cate" activeClassName="select">分类</NavLink>
                <NavLink to="/index/shop" activeClassName="select">购物车</NavLink>
                <NavLink to="/index/me" activeClassName="select">我的</NavLink>
            </footer>
        </>
    )
}
